<%--
  Created by IntelliJ IDEA.
  User: Zhj
  Date: 2024/4/30
  Time: 21:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入jstl的命名空间 标签以c开头--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/js/layui.js" ></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .message-content{
            width: 50%;
            /* height: 800px; */
            margin: 0 auto;
            margin-top: 50px;
            background-color: #ecf0f3;
            /*  */
            padding: 20px 30px;
            border-radius: 9px;
        }
        .layui-form-label{
            border: 1px solid transparent;
        }
        /* 详情页标题处理 */
        .detail-title{
            margin-bottom: 30px;
            text-align: center;
        }
        /* 文件上传输入框美化 */
        .file-avatar{

            height: 38px;
            margin-top: 20px;
            /* padding: 15px 0 15px 10px;  */
            background-color: #fff;
        }
        .opeate-btn{
            text-align: center;
        }
        /* 文件上传标题美化处理 */
        .avatar-title{
            display: inline-block;margin-bottom: 10px; width: 110px; height: 38px; text-align: center; padding: 8px 15px;
        }
    </style>
</head>
<body>
<div class="message-content">
    <!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
    <h1 class="detail-title">
        个人天地
    </h1>
    <form class="layui-form layui-form-pane" action="/user/UpdatePersonMessage" method="post">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" id="username" value="${user.username}" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="realname" id="realname" value="${user.realname}" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="date" name="birthdate" id="birthdate" value="${user.birthdate}" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" id="email" value="${user.email}" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input type="phone" name="phone" id="phone" value="${user.phone}" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <div class="file-avatar"style="">
                <label class="avatar-title">头像上传</label>
                <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />
            </div>
        </div>
        <div class="layui-form-item opeate-btn">
            <a href="#"><button class="layui-btn" lay-submit lay-filter="demo1">回到首页</button></a>
            <a href="#"><button class="layui-btn" lay-submit lay-filter="demo2">立即完善</button></a>
        </div>
    </form>
</div>
<script>
    // layui.use(['form'], function(){
    //     var form = layui.form;
    //     var layer = layui.layer;
    //     // 提交事件
    //     form.on('submit(demo2)', function(data){
    //         var field = data.field; // 获取表单字段值
    //         // 显示填写结果，仅作演示用
    //         layer.alert(JSON.stringify(field), {
    //             title: '当前填写的字段值'
    //         });
    //         // 此处可执行 Ajax 等操作
    //         // …
    //         return false; // 阻止默认 form 跳转
    //     });
    // });
</script>
</body>
</html>
